<template>
	<xn-form-container
		title="流程配置"
		:width="1500"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
		:bodyStylePadding="1"
	>
		<FlowDesign
			ref="FlowDesign"
			:node="node"
			@publish="onSubmit"
			@close="onClose"
			:apiUrl="config.API_URL"
			:tableName="table"
		/>
	</xn-form-container>
</template>
<script setup name="flowConfig">
	import { cloneDeep } from 'lodash-es'
	import sysFlowConfigApi from '@/api/flow/sysFlowConfigApi'
	import { message } from 'ant-design-vue'
	import config from '@/config/index'
	const emit = defineEmits({ successful: null })
	const visible = ref(false)
	const submitLoading = ref(false)
	// 表单数据
	const formData = ref({})
	const node = ref({})
	const table = ref('')
	const modal = ref({
		width: '1474px'
	})

	const onOpen = (record) => {
		visible.value = true
		console.log(record)
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			node.value = JSON.parse(recordData.flowJson)
			table.value = recordData.mainTable
		}
	}

	const onSubmit = (node) => {
		sysFlowConfigApi.sysFlowConfig({ id: formData.value.id, config: JSON.stringify(node) }).then(() => {
			onClose()
			emit('successful')
		})
	}

	const onClose = () => {
		visible.value = false
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
<style scoped>
	.designer-wrap {
		height: 88vh !important;
	}
</style>
